<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#first{width: 200px;height: 200px;border: 1px red solid;}
		#second{width: 100px;height: 100px;border: 5px solid blue;}
	</style>
</head>
<body>
	<div id="first" class="redDiv">123</div>
	<div id="second">456</div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	// $("div").css({"color":"red","background-color":"gray","width":function(index,value){return parseInt(Math.random()*100+100);},"height":"50px"});
	// $("div").addClass("item redDiv");
	// $("div").removeClass("redDiv");
	$("div").html("666");
	// 通过JQ获取到的是JQ对象，通过原生方法获取到的是原生对象
	// JQ对象不能调用原生方法，原生对象不能调用JQ方法
	// var span = document.createElement("span");
	// span.innerHTML = "span";
	// $(span).css("color","red");
	// $("div")[0].appendChild(span);
	// $("<img/>").attr("src","img/1.jpg")
	// 把p插入div内
	$("div").append("<p>456</p>");
	// $("div").appendTo("<p>789</p>");
	console.log($("div").find("p"));
</script>
</html>